<template>
  <div class="answerCard">
    <van-popup
      :value="isShow"
      @input="$emit('input', $event)"
      position="bottom"
    >
      <div class="topBox">
        <van-nav-bar title="答题卡题">
          <template #right>
            <span><span class="num">0</span>/53题</span>
          </template>
        </van-nav-bar>

        <div class="titleBox">共53题</div>
      </div>
      <div class="mainBox">
        <ul>
          <li v-for="index in 20" :key="index">{{ index }}</li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['isShow'],
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
.answerCard {
  .topBox {
    .num {
      color: red;
    }
    .titleBox {
      font-size: 14px;
      color: #b4b4bd;
      background-color: #f7f4f5;
      height: 44px;
      line-height: 44px;
      padding-left: 20px;
    }
  }
  .mainBox {
    ul {
      padding-top: 20px;
      padding-left: 20px;
      overflow: hidden;
      li {
        float: left;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        border: 1px solid #b4b4bd;
        font-size: 16px;
        color: #b4b4bd;
        margin: 10px;
      }
    }
  }
}
</style>
